<template>
  <SearchBox ref="searchRef" :searchValue="searchValue" @search="search" />
  <div class="sys">
    <a-button @click="openEdit()">新增</a-button>
  </div>
  <tableData
    :tableList="tableList"
    @changePagination="changePagination"
    :pagination="pagination"
    @openEdit="openEdit"
  />
  <packEditModal ref="editModalRef" @update="handleUpdate" @cancel="handleCancel" />
</template>
<style lang="stylus" scoped>
.sys
  padding 10px 0
</style>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import packEditModal from './components/pack/editModal.vue'
import tableData from './components/pack/tableData.vue'
import type { PointPack } from '@/types/point-pack.api'
import type { TSearch } from './components/pack/type.dict'
import SearchBox from './components/pack/searchBox.vue'
// 替换云函数为接口调用
import { listPointPacks, createPointPack, updatePointPack } from '@/api/point-pack.api'
import type { CreateAdminPointPackDto, UpdateAdminPointPackDto } from '@/types/point-pack.api'
import { message } from 'ant-design-vue'
const searchRef = ref()

//初始化SDK实例
const tableList = ref<PointPack[]>([])
const isEdit = ref(true)
const pagination = ref<{
  total: number
  current: number
  pageSize: number
}>({
  total: 0,
  current: 1,
  pageSize: 10,
})
const searchValue = ref<TSearch>({
  name: '',
  status: '',
  progress: '',
})
const editModalRef = ref()

// 打开编辑弹窗
const openEdit = (record?: PointPack) => {
  console.log(record)
  if (record) {
    isEdit.value = true
  } else {
    isEdit.value = false
  }
  editModalRef.value.open(record)
}

// 处理更新
const handleUpdate = async (record: PointPack) => {
  const isEditMode = isEdit.value && !!record._id
  try {
    if (isEditMode && record._id) {
      const dto: UpdateAdminPointPackDto = {
        point: record.point,
        cover: record.cover,
        name: record.name,
        details: record.details,
        status: record.status,
        price: Math.round(record.price * 100),
      }
      const { code, message: msg } = await updatePointPack(record._id, dto)
      if (code === 200) {
        message.success('编辑成功')
        getLis()
      } else {
        message.error(msg || '编辑失败')
      }
    } else {
      const dto: CreateAdminPointPackDto = {
        point: record.point,
        cover: record.cover,
        name: record.name,
        details: record.details,
        status: record.status,
        price: Math.round(record.price * 100),
      }
      const { code, message: msg } = await createPointPack(dto)
      if (code === 200) {
        message.success('新增成功')
        getLis()
      } else {
        message.error(msg || '新增失败')
      }
    }
  } catch (err) {
    console.log(err)
    message.error('请求失败')
  }
}
const handleCancel = () => {
  // 取消操作
}
// 搜索操作
const search = (searchVal: TSearch) => {
  searchValue.value = { ...searchValue.value, ...searchVal }
  pagination.value.current = 0
  getLis()
}

const getLis = async () => {
  try {
    const { code, data } = await listPointPacks({
      name: searchValue.value.name,
      status: searchValue.value.status,
    })
    if (code === 200 && data && Array.isArray(data.list)) {
      tableList.value = data.list
      pagination.value.total = data.list.length
    }
  } catch (err) {
    console.log(err)
    message.error('加载失败')
  }
}

const changePagination = (paginations: { current: number; pageSize: number }) => {
  pagination.value.current = paginations.current
  pagination.value.pageSize = paginations.pageSize
  getLis()
}
onMounted(() => {
  getLis()
})
</script>
